import {
  Card,
  Form,
  Grid,
  DatePicker,
  Select,
  Space,
  Button,
  Divider,
} from "@arco-design/web-react";
import {
  IconInfoCircle,
  IconRefresh,
} from "@arco-design/web-react/icon";
import { IconSearch } from "@arco-design/web-react/icon";
import { useState } from "react";
const { Row, Col } = Grid;
type QueryFormType = {
  date: string;
  energyType: number;
};
export default function index() {
  const [loading, setLoading] = useState(false);
  const [queryForm] = Form.useForm<QueryFormType>();
  const handleSubmitQuery = () => {
    try {
      queryForm.validate();
      console.log(queryForm.getFields());
    } catch (error) {
      console.log(error);
    }
  };
  const handleReset = () => {
    queryForm.resetFields();
  };

  return (
    <div>
      <Card>
        <div className="flex">
          <Form form={queryForm} onSubmit={handleSubmitQuery}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item label="选择日期" field="date">
                  <DatePicker.RangePicker
                    showTime
                    format="YYYY-MM-DD"
                    prefix={<IconInfoCircle />}
                    style={{ width: 350 }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="选择种类" field="energyType">
                  <Select
                    style={{ width: "200px" }}
                    options={[
                      {
                        label: "印花用水",
                        value: 1,
                      },
                      {
                        label:'印花用电',
                        value:''
                      },
                      {
                        label:'印花用气',
                        value:''
                      },
                      {
                        label: "染色用水",
                        value: 2,
                      },
                      {
                        label: "染色用电",
                        value: 3,
                      },
                      {
                        label:'',
                        value:''
                      }
                    ]}
                    placeholder="请选择能耗种类"
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Divider type="vertical" />
          <Space
            direction={"vertical"}
            className={"flex justify-center pl-5 mr-5"}
          >
            <Button
              loading={loading}
              type="primary"
              icon={<IconSearch />}
              onClick={handleSubmitQuery}
            >
              查询
            </Button>
            <Button
              loading={loading}
              type="primary"
              icon={<IconRefresh />}
              onClick={handleReset}
            >
              重制
            </Button>
          </Space>
        </div>
      </Card>
      <Space />
      <Card></Card>
    </div>
  );
}